Skip to content

MkBadge

Show source on GitHub

Node for a locally-created badge (based on "anybadge").

Description

The node creates a badge svg, appends it to the virtual files, and shows it as an image.

Example: Regular

Jinja

{{ ("Some", "Badge") | MkBadge }}

Python

MkBadge('Some', 'Badge')

Some Some Badge Badge 

<body><svg xmlns="http://www.w3.org/2000/svg" width="86" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_16">        <rect width="86" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_16)">        <path fill="#555" d="M0 0h41v20H0z"/>        <path fill="#ffa724" d="M41 0h45v20H41z"/>        <path fill="url(#b)" d="M0 0h86v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="21.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="20.5" y="14">Some</text>    </g>    <g fill="#333333" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="64.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="63.5" y="14">Badge</text>    </g></svg></body>

<body><svg xmlns="http://www.w3.org/2000/svg" width="86" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_17">        <rect width="86" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_17)">        <path fill="#555" d="M0 0h41v20H0z"/>        <path fill="#4c1" d="M41 0h45v20H41z"/>        <path fill="url(#b)" d="M0 0h86v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="21.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="20.5" y="14">Some</text>    </g>    <g fill="" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="64.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="63.5" y="14">Badge</text>    </g></svg></body>

Example: Font size

Jinja

{{ ("Some", "Badge") | MkBadge(font_size=12) }}

Python

MkBadge('Some', 'Badge', font_size=12)

Some Some Badge Badge 

<body><svg xmlns="http://www.w3.org/2000/svg" width="94" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_18">        <rect width="94" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_18)">        <path fill="#555" d="M0 0h45v20H0z"/>        <path fill="#ffa724" d="M45 0h49v20H45z"/>        <path fill="url(#b)" d="M0 0h94v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="23.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="22.5" y="14">Some</text>    </g>    <g fill="#333333" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="70.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="69.5" y="14">Badge</text>    </g></svg></body>

<body><svg xmlns="http://www.w3.org/2000/svg" width="94" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_19">        <rect width="94" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_19)">        <path fill="#555" d="M0 0h45v20H0z"/>        <path fill="#4c1" d="M45 0h49v20H45z"/>        <path fill="url(#b)" d="M0 0h94v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="23.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="22.5" y="14">Some</text>    </g>    <g fill="" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="70.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="69.5" y="14">Badge</text>    </g></svg></body>

Example: Char padding

Jinja

{{ ("Some", "Badge") | MkBadge(num_padding_chars=5) }}

Python

MkBadge('Some', 'Badge', num_padding_chars=5)

Some Some Badge Badge 

<body><svg xmlns="http://www.w3.org/2000/svg" width="266" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_20">        <rect width="266" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_20)">        <path fill="#555" d="M0 0h131v20H0z"/>        <path fill="#ffa724" d="M131 0h135v20H131z"/>        <path fill="url(#b)" d="M0 0h266v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="66.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="65.5" y="14">Some</text>    </g>    <g fill="#333333" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="199.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="198.5" y="14">Badge</text>    </g></svg></body>

<body><svg xmlns="http://www.w3.org/2000/svg" width="266" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_21">        <rect width="266" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_21)">        <path fill="#555" d="M0 0h131v20H0z"/>        <path fill="#4c1" d="M131 0h135v20H131z"/>        <path fill="url(#b)" d="M0 0h266v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="66.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="65.5" y="14">Some</text>    </g>    <g fill="" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="199.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="198.5" y="14">Badge</text>    </g></svg></body>

Example: Badge color

Jinja

{{ ("Some", "Badge") | MkBadge(font_size=12) }}

Python

MkBadge('Some', 'Badge', font_size=12)

Some Some Badge Badge 

<body><svg xmlns="http://www.w3.org/2000/svg" width="94" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_18">        <rect width="94" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_18)">        <path fill="#555" d="M0 0h45v20H0z"/>        <path fill="#ffa724" d="M45 0h49v20H45z"/>        <path fill="url(#b)" d="M0 0h94v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="23.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="22.5" y="14">Some</text>    </g>    <g fill="#333333" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="70.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="69.5" y="14">Badge</text>    </g></svg></body>

<body><svg xmlns="http://www.w3.org/2000/svg" width="94" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_19">        <rect width="94" height="20" rx="3" fill="#fff"/>    </mask>    <g mask="url(#anybadge_19)">        <path fill="#555" d="M0 0h45v20H0z"/>        <path fill="#4c1" d="M45 0h49v20H45z"/>        <path fill="url(#b)" d="M0 0h94v20H0z"/>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="23.5" y="15" fill="#010101" fill-opacity=".3">Some</text>        <text x="22.5" y="14">Some</text>    </g>    <g fill="" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">        <text x="70.5" y="15" fill="#010101" fill-opacity=".3">Badge</text>        <text x="69.5" y="14">Badge</text>    </g></svg></body>

Example: GitLab style

Jinja

{{ ("Some", "Badge") | MkBadge(use_gitlab_style=True) }}

Python

MkBadge('Some', 'Badge', use_gitlab_style=True)

Some Badge 

<body><svg xmlns="http://www.w3.org/2000/svg" width="86" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_22">        <rect width="86" height="20" rx="10" fill="#fff"/>    </mask>    <g mask="url(#anybadge_22)">        <path fill="#ffa724" d="M0 0h86v20H0z"/>        <path fill="#262626" d="M41 2h36v16H41z"/>        <path fill="#262626" d="M76,18 a1,1 0 0,0 0,-16"/>        <path fill="url(#b)" d="M0 0h86v20H0z"/>    </g>    <g fill="#333333" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="20.5" y="14">Some</text>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="63.5" y="14">Badge</text>    </g></svg></body>

<body><svg xmlns="http://www.w3.org/2000/svg" width="86" height="20">    <linearGradient id="b" x2="0" y2="100%">        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>        <stop offset="1" stop-opacity=".1"/>    </linearGradient>    <mask id="anybadge_23">        <rect width="86" height="20" rx="10" fill="#fff"/>    </mask>    <g mask="url(#anybadge_23)">        <path fill="#4c1" d="M0 0h86v20H0z"/>        <path fill="#262626" d="M41 2h36v16H41z"/>        <path fill="#262626" d="M76,18 a1,1 0 0,0 0,-16"/>        <path fill="url(#b)" d="M0 0h86v20H0z"/>    </g>    <g fill="" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="20.5" y="14">Some</text>    </g>    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">        <text x="63.5" y="14">Badge</text>    </g></svg></body>

Bases: MkImage

__init__ 

__init__(
    label: str | tuple[str, str],
    value: str | None = None,
    *,
    font_size: Literal[10, 11, 12] | None = None,
    font_name: str | None = None,
    num_padding_chars: int | None = None,
    badge_color: str | None = None,
    text_color: str | None = None,
    use_gitlab_style: bool = False,
    **kwargs: Any
)

Parameters:

Name Type Description Default
label str | tuple[str, str]

Left part of the badge. If given a tuple, use 2nd item as value.

 required
value str | None

Right part of the badge

 None
font_size Literal[10, 11, 12] | None

Size of font to use

 None
font_name str | None

Name of font to use

 None
num_padding_chars int | None

Number of chars to use for padding

 None
badge_color str | None

Badge color

 None
text_color str | None

Badge color

 None
use_gitlab_style bool

Use Gitlab-scope style

 False
kwargs Any

Keyword arguments passed to parent

 {}
Name Children Inherits
MkImage
mknodes.basenodes.mkimage
Image including optional caption.		 
graph TD
  94854579922464["mkbadge.MkBadge"]
  94854583050176["mkimage.MkImage"]
  94854582916880["mknode.MkNode"]
  94854582838576["node.Node"]
  140544995341632["builtins.object"]
  94854583050176 --> 94854579922464
  94854582916880 --> 94854583050176
  94854582838576 --> 94854582916880
  140544995341632 --> 94854582838576
/home/runner/work/mknodes/mknodes/mknodes/templatenodes/mkbadge/metadata.toml
[metadata]
icon = "simple-icons:shieldsdotio"
name = "MkBadge"
group = "badge"

[requirements.package.anybadge]

[examples.regular]
title = "Regular"
jinja = """
{{ ("Some", "Badge") | MkBadge }}
"""

[examples.font_size]
title = "Font size"
jinja = """
{{ ("Some", "Badge") | MkBadge(font_size=12) }}
"""

[examples.char_padding]
title = "Char padding"
jinja = """
{{ ("Some", "Badge") | MkBadge(num_padding_chars=5) }}
"""

[examples.badge_color]
title = "Badge color"
jinja = """
{{ ("Some", "Badge") | MkBadge(font_size=12) }}
"""

[examples.gitlab_style]
title = "GitLab style"
jinja = """
{{ ("Some", "Badge") | MkBadge(use_gitlab_style=True) }}
"""

[output.html]
template = """
<body>{{ node.data | replace("\n", "") | html_link(node.url) }}</body>
"""
mknodes.templatenodes.mkbadge.MkBadge
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
class MkBadge(mkimage.MkImage):
    """Node for a locally-created badge (based on "anybadge").

    The node creates a badge svg, appends it to the virtual files, and
    shows it as an image.
    """

    ICON = "simple/shieldsdotio"
    REQUIRED_PACKAGES = [resources.Package("anybadge")]

    def __init__(
        self,
        label: str | tuple[str, str],
        value: str | None = None,
        *,
        font_size: Literal[10, 11, 12] | None = None,
        font_name: str | None = None,
        num_padding_chars: int | None = None,
        badge_color: str | None = None,
        text_color: str | None = None,
        use_gitlab_style: bool = False,
        **kwargs: Any,
    ):
        """Constructor.

        Arguments:
            label: Left part of the badge. If given a tuple, use 2nd item as value.
            value: Right part of the badge
            font_size: Size of font to use
            font_name: Name of font to use
            num_padding_chars: Number of chars to use for padding
            badge_color: Badge color
            text_color: Badge color
            use_gitlab_style: Use Gitlab-scope style
            kwargs: Keyword arguments passed to parent
        """
        super().__init__("", **kwargs)
        if isinstance(label, tuple):
            self.label, self.value = label
        else:
            self.label = label
            self.value = value
        self.font_size = font_size
        self.font_name = font_name
        self.num_padding_chars = num_padding_chars
        self._badge_color = badge_color
        self._text_color = text_color
        self.use_gitlab_style = use_gitlab_style

    @property
    def badge_color(self) -> str | None:
        if isinstance(self._badge_color, str):
            return self._badge_color
        return self.ctx.theme.primary_color

    def _to_markdown(self):
        inner = htmlfilters.html_link(self.data.replace("\n", ""), self.url)
        return f"<body>{inner}</body>"

    @property
    def text_color(self) -> str | None:
        if isinstance(self._text_color, str):
            return self._text_color
        color = self.ctx.theme.text_color
        return f"{color},#fff" if self.use_gitlab_style else f"#fff,{color}"

    @property
    def data(self) -> str:
        return get_badge(
            label=self.label,
            value=self.value,
            font_size=self.font_size,
            font_name=self.font_name,
            num_padding_chars=self.num_padding_chars,
            badge_color=self.badge_color,
            text_color=self.text_color,
            use_gitlab_style=self.use_gitlab_style,
        )

    @property
    def path(self) -> str:
        hashed = utils.get_hash(repr(self))
        unique = f"{self.label}_{self.value}_{hashed}.svg"
        return textfilters.slugify(unique)